<template>
  <!-- 车品订单管理列表 -->
  <view class="car-goods-order flex flex-dir-c">
    <view class="u-tabs-box">
      <!-- tabs标签 -->
      <u-tabs
        :list="listTitle"
        :is-scroll="false"
        :current="current"
        :height="90"
        :duration="0.3"
        active-color="#FBB000"
        :bar-width="90"
        @change="tabsChange"
      ></u-tabs>

      <!-- 订单状态 -->
      <!-- 我销售的订单状态 -->
      <view v-show="swiperCurrent === 0" class="order-status-box">
        <view class="order-status flex flex-ai-c flex-jc-sb">
          <view
            v-for="(text, i) in orderStatusTexts"
            :key="i"
            @click="switchStatus(text, i)"
            class="status-item-text"
            :class="{ active: salesOrder.currentStatus === i }"
            >{{ text }}</view
          >
        </view>
      </view>

      <!-- 我购买的订单状态 -->
      <view v-show="swiperCurrent === 1" class="order-status-box">
        <view class="order-status flex flex-ai-c flex-jc-sb">
          <view
            v-for="(text, i) in orderStatusTexts"
            :key="i"
            @click="switchStatus(text, i)"
            class="status-item-text"
            :class="{ active: buyOrder.currentStatus === i }"
            >{{ text }}</view
          >
        </view>
      </view>
    </view>

    <!-- 订单内容 -->
    <view class="order-main">
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        :duration="300"
        @change="swiperChange"
      >
        <!-- 我销售的 -->
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            :lower-threshold="10"
            :refresher-enabled="scrollRefresherEnabled"
            :refresher-triggered="salesOrder.refreshStatus"
            :refresher-threshold="60"
            refresher-background="#f6f6f6"
            refresher-default-style="none"
            @scroll="salesScrollChange"
            @refresherpulling="refresherpulling"
            @refresherrefresh="$u.throttle(refreshDown, 500)"
            @scrolltolower="tolowerChange"
            class="order-list-content"
          >
            <!-- 下拉刷新区域 -->
            <view class="refresher-box" slot="refresher">
              {{ salesOrder.refresherText }}
            </view>
            <!-- loading -->
            <view v-if="loadingList" class="flex flex-jc-c mt-20">
              <u-loading :show="loadingList" mode="flower" size="52"></u-loading>
            </view>
            
            <view v-else class="content">
              <!-- 数据为空显示 -->
              <default-img
                :show="salesOrder.list[salesOrder.currentStatus].length === 0"
                msg="暂无订单"
              ></default-img>
              
              <!-- 订单列表内容 -->
              <view class="order-list">
                <view
                  v-for="item in salesOrder.list[salesOrder.currentStatus]"
                  class="item"
                  :key="item.id"
                >
                  <card-order
                    :orderData="item"
                    :type="swiperCurrent"
                    @updateStatus="updateStatus"
										:goInPage='goInPage'
                  ></card-order>
                </view>
                
                <!-- 加载更多状态 -->
                <u-loadmore
                  v-if="salesOrder.list[salesOrder.currentStatus].length !== 0"
                  :status="salesOrder.loadmore[salesOrder.currentStatus]"
                  :margin-top="20"
                  :margin-bottom="20"
                  @loadmore="getOrderList()"
                />
              </view>
            </view>
          </scroll-view>
        </swiper-item>

        <!-- 我购买的 -->
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            :lower-threshold="10"
            :refresher-enabled="scrollRefresherEnabled"
            :refresher-triggered="buyOrder.refreshStatus"
            :refresher-threshold="60"
            refresher-background="#f6f6f6"
            refresher-default-style="none"
            @scroll="salesScrollChange"
            @refresherpulling="refresherpulling"
            @refresherrefresh="$u.throttle(refreshDown, 500)"
            @scrolltolower="tolowerChange"
            class="order-list-content"
          >
            <!-- 下拉刷新区域 -->
            <view class="refresher-box" slot="refresher">
              {{ buyOrder.refresherText }}
            </view>
            
            <!-- loading -->
            <view v-if="loadingList" class="flex flex-jc-c mt-20">
              <u-loading :show="loadingList" mode="flower" size="52"></u-loading>
            </view>
            
            <view v-else class="content">
              <!-- 数据为空显示 -->
              <default-img
                :show="buyOrder.list[buyOrder.currentStatus].length === 0"
                msg="暂无订单"
              ></default-img>
              
              <!-- 订单列表内容 -->
              <view class="order-list">
                <view
                  v-for="item in buyOrder.list[buyOrder.currentStatus]"
                  :key="item.id"
                  class="item"
                >
                  <card-order
                    :orderData="item"
                    :type="swiperCurrent"
                    @updateStatus="updateStatus"
										:goInPage='goInPage'
                  ></card-order>
                </view>
                
                <!-- 加载更多状态 -->
                <u-loadmore
                  v-if="buyOrder.list[buyOrder.currentStatus].length !== 0"
                  :status="buyOrder.loadmore[buyOrder.currentStatus]"
                  :margin-top="20"
                  :margin-bottom="20"
                  @loadmore="getOrderList()"
                />
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import cardOrder from '../components/card-order.vue'

export default {
  components: {
    cardOrder,
  },
  data() {
    return {
      // tabs标题
      listTitle: [
        {
          name: '我销售的',
        },
        {
          name: '我购买的',
        },
      ],

      // 我销售的订单
      salesOrder: {
        // 用来展示的订单列表
        // 0: 全部, 1: 待付款, 2: 待发货, 3: 待收货, 4: 已完成
        list: {
          0: [],
          1: [],
          2: [],
          3: [],
          4: [],
        },
        pageNows: {
          0: 1,
          1: 1,
          2: 1,
          3: 1,
          4: 1,
        },
        // 加载更多
        loadmore: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
        currentStatus: 0, // 当前订单状态
        refresherText: '下拉刷新', 
        refreshStatus: false, // 下拉刷新状态
      },

      // 我购买的订单
      buyOrder: {
        // 用来展示的订单列表
        // 0: 全部, 1: 待付款, 2: 待发货, 3: 待收货, 4: 已完成
        list: {
          0: [],
          1: [],
          2: [],
          3: [],
          4: [],
        },
        pageNows: {
          0: 1,
          1: 1,
          2: 1,
          3: 1,
          4: 1,
        },
        // 加载更多
        loadmore: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
        currentStatus: 0, // 当前订单状态
        refresherText: '下拉刷新', 
        refreshStatus: false, // 下拉刷新状态
      },
      orderStatusTexts: ['全部', '待付款', '待发货', '待收货', '已完成'], // 订单状态标题
      loadingList: true, // 列表loading

      scrollTop: 0, // 列表到顶部的距离
      scrollRefresherEnabled: true, // 是否滚动到顶部了
      current: 0, // tabs标题当前索引
      swiperCurrent: 0, // swiper页当前索引
      listAll: [], // 订单列表全部状态的数据

      orderDataAll: null, // 两个类型的订单所有数据，状态
			goInPage:'',//msg 从消息进入
    }
  },

  onLoad(e) {
    // 支付收银台页面跳转过来，index为1，我购买的
    if (e.index) {
      this.swiperCurrent = parseFloat(e.index)
      this.current = parseFloat(e.index)
    }
		this.goInPage=e.type?e.type:''
    uni.$on('backChange', (status) => {
      // 发货成功后，从订单详情跳转回来会触发的事件
      // 我销售的订单的发货成功之后跳转回来触发
      // 我购买的订单的确认收货成功之后跳转回来触发
      // status参数是跳转到对应的订单状态的列表
      // let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
      // currentData.currentStatus = status || currentData.currentStatus
      let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
      currentData.list[currentData.currentStatus] = [] // 清空订单列表
      currentData.pageNows[currentData.currentStatus] = 1 // 初始化当前页码
      this.getOrderList()
    })
  },

  created() {
    // 将我销售的和我购买的这两种类型的订单数据储存在一个map结构对象里
    // 通过当前swiper页this.swiperCurrent字段获取对应的订单数据
    this.orderDataAll = new Map([
      [0, this.salesOrder],
      [1, this.buyOrder],
    ])

    this.getOrderList() // 获取订单列表
  },

  methods: {
    // tab栏切换
    tabsChange(index) {
      this.current = index
      this.swiperCurrent = index
    },

    // 加载中的弹窗
    loading(loading) {
      loading ? uni.showLoading({ title: '加载中' }) : uni.hideLoading()
    },

    // 切换swiper列表页
    swiperChange(e) {
      let index = e.detail.current
      this.current = index
      this.swiperCurrent = index
      let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
      // 切换滑动页时，如果切换到目标页的列表是空[]，则请求一次列表
      // 如果不为空则不请求，除非手动下拉刷新再重新请求订单列表数据
      if (currentData.list[currentData.currentStatus].length === 0) {
        this.loading(true)
        this.getOrderList(() => {
          this.loading(false)
        })
      }
    },

    // 获取订单列表
    async getOrderList(cb = () => {}) {
      this.loadingList = true
      try {
        let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
        let params = {
          pageIndex: currentData.pageNows[currentData.currentStatus], // 当前页码
          pageSize: 10,
          status: currentData.currentStatus,
          storeid: this.$store.state.userInfoDetail.store.storeId,
          type: this.swiperCurrent,
        }
        const { data } = await this.$api.carGoodsOrder.GetOrderCarSuppliesList(
          params
        )
        currentData.list[currentData.currentStatus] = [...currentData.list[currentData.currentStatus], ...data.list] // 赋值给用来展示的订单列表
        currentData.pageNows[currentData.currentStatus] += 1 // 当前页加1
        currentData.loadmore.splice(currentData.currentStatus, 1, data.list.length >= 10 ? 'loadmore' : 'nomore') // 改变加载更多状态
        console.log('车品订单列表', data.list)
        this.loadingList = false
        cb(true) // 请求完成之后的回调函数
      } catch (err) {
        this.loadingList = false
        console.log('车品订单列表报错', err)
        cb(false) // 请求完成之后的回调函数
      }
    },
    
    // 下拉刷新正在下拉事件
    refresherpulling(e) {
      let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
      if (e.detail.deltaY >= 60) {
        currentData.refresherText = '释放更新'
      } else {
        currentData.refresherText = '下拉刷新'
      }
    },

    // 下拉触发刷新
    refreshDown() {
      console.log('下拉刷新了', this.scrollTop)
      let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
      currentData.refreshStatus = true // 更改下拉的状态
      currentData.refresherText = '努力刷新中'
      // currentData.currentStatus
      currentData.list[currentData.currentStatus] = [] // 清空列表
      currentData.pageNows[currentData.currentStatus] = 1 // 当前页加1
      // 刷新操作 - 请求获取订单列表
      this.loading(true)
      this.getOrderList((status) => {
        currentData.refreshStatus = false // 更改下拉的状态
        currentData.refresherText = '下拉刷新'
        this.loading(false)
      })
    },
    
    // 列表滚动到底部触发事件
    tolowerChange() {
      let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
      let more = currentData.loadmore[currentData.currentStatus]
      if (more === 'nomore') return false
      currentData.loadmore.splice(currentData.currentStatus, 1, 'loading')
      this.getOrderList()
      console.log('触底了')
    },

    // 切换订单状态
    switchStatus(text, i) {
      let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
      currentData.currentStatus = i
      if (currentData.list[i].length === 0) {
        
        this.getOrderList()
      }
    },

    // 订单列表滚动到顶部时触发该事件
    salesScrollChange({ detail }) {
      this.scrollRefresherEnabled = detail.scrollTop < 1
      this.scrollTop = detail.scrollTop
    },
    
    // 确认收货
    updateStatus(s) {
      let currentData = this.orderDataAll.get(this.swiperCurrent) // 获取当前类型订单数据的对象
      currentData.list[currentData.currentStatus] = [] // 清空列表
      currentData.pageNows[currentData.currentStatus] = 1 // 当前页加1      // 等待待收货列表请求完成之后，再切换到已完成状态的列表
      this.getOrderList(() => {
        if (s) {
          this.buyOrder.currentStatus = s || this.buyOrder.currentStatus
          this.updateStatus(false)            
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
}
.car-goods-order {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;

  // tabs切换标题
  .u-tabs-box {
    .order-status-box {
      padding: 24rpx 24rpx 0;
    }

    // 状态标题
    .order-status {
      height: 74rpx;
      line-height: 74rpx;
      background-color: #fff;
      border-radius: 10rpx;
      box-shadow: 0px 2px 10px 0 #ddd;
      position: relative;
      z-index: 99;

      .status-item-text {
        width: 20%;
        text-align: center;
        font-size: 26rpx;
        color: #666666;

        &.active {
          color: #fbb000;
        }
      }
    }
  }

  // 订单列表内容
  .order-main {
    flex: 1;

    // swiper切换页
    .swiper-box {
      height: 100%;

      .swiper-item {
        padding: 0 24rpx;
      }
    }
    
    // 下拉刷新区域
    .refresher-box {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
    }
  }
}

// 订单列表内容的滚动容器
.order-list-content {
  width: 100%;
  height: 100%;

  // 订单列表
  .order-list {
    padding-bottom: 40rpx;
    .item {
      margin-top: 24rpx;

      // &:first-child {
      //   margin-top: 10rpx;
      // }
    }
  }
}
</style>
